// 初始化时间
let time = document.querySelector('.time')
setInterval(function () {
    time.innerHTML = getTime()
}, 1000)

function getTime(time) {
    let date;
    if (date) {
        date = time
    } else {
        date = new Date()
    }
    let y = date.getFullYear();  //年
    let m = zero(date.getMonth() + 1);  //月
    let d = zero(date.getDate());  //日
    let hh = zero(date.getHours());  //时
    let mm = zero(date.getMinutes());  //分
    let ss = zero(date.getSeconds());  //秒
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 补零函数
function zero(n) {
    return n > 9 ? n : '0' + n
}



// 剩余停车位
let remainder = document.querySelector('.remainder');
let count = remainder.innerHTML;  //剩余个数
let all = document.querySelector('.all');
let p = document.querySelector('.stop p');
let used = 0; //已用停车位


let go = document.querySelector('.go');  //入库按钮
let out = document.querySelector('.out');  //出库按钮
let mask = document.querySelector('.mask');
// 入库点击事件
go.addEventListener('click', function () {
    // 如果总车位和医用车位相等说明位置已满
    console.log(used);
    if (all.innerHTML == used) {
        p.style.display = 'block';
        return
    }
    // 否则显示遮罩层
    p.style.display = 'none';
    mask.style.display = 'block'
})



let main = document.querySelector('.main'); //输入车牌号板块
main.addEventListener('click', function (e) {
    // 阻止冒泡
    e.stopPropagation()
})

// 隐藏模态框
mask.addEventListener('click', function () {
    mask.style.display = 'none';
})

// 获取车牌输入框
let brand_ipt = document.querySelector('.brand-ipt');
let arr = []; //定义空数组用来存放输入的车牌号
// 点击确认按钮
let confirm = document.querySelector('.confirm');
confirm.addEventListener('click', function () {
    if (brand_ipt.value === '') {
        alert('车牌号不能为空！')
    }
    // 定义对象，记录入库车辆的车牌号和入库时间
    let car = {
        carNo: brand_ipt.value,
        carInTime: new Date()
    }
    // 将每个入库车辆信息放入数组中
    arr.push(car);  //将信息放入数组
    // 已用车位+1
    used++;
    // 剩余车位-1
    count--;
    // 将最新的数据传入剩余车位
    remainder.innerHTML = count;
    // 遮罩层隐藏
    mask.style.display = 'none';
    brand_ipt.value = '';
})


let stop = document.querySelector('.stop'); //入库信息
let pick = document.querySelector('.pick');  //出库信息
let no = document.querySelector('.no');

// 点击出库按钮
out.addEventListener('click', function () {
    // 如果已用车位为0，显示无车辆需要出库
    if (used === 0) {
        no.style.display = 'block';
        return
    }
    // 定义index记录随机抽中的车辆的信息
    let index = Math.floor(Math.random() * used)
    // 将抽出的车辆信息从原数组中删除
    let car = arr.splice(index, 1)[0];
    // 出库时间
    let carOutTime = new Date()

    // 出库和入库之间的时间差（毫秒）
    let carTime = Math.floor((carOutTime.getTime() - car.carInTime.getTime()) / 1000);
    // 转化为小时
    let h = Math.floor(carTime / 3600)
    // 转换为分钟
    let m = Math.floor(carTime % 3600 / 60)
    // 转换为秒
    let s = Math.floor(carTime % 60)
    // 停车时间
    let stopCarTime = `${h}小时${m}分钟${s}秒`;
    // 停车费
    let cash = 0;

    if (m > 30) {
        cash = h * 4 + 2
    } else {
        cash = h * 4
    }

    stop.style.display = 'none';
    pick.style.display = 'block';
    // 已用车位-1
    used--;
    // 剩余车位+1
    count++;


    // 将最新的信息更新到页面上
    remainder.innerHTML = count;
    // 车牌号
    document.querySelector('.plate').innerHTML = car.carNo;
    // 入场时间
    document.querySelector('.admission').innerHTML = getTime(car.carInTime)
    // 出场时间
    document.querySelector('.appearances').innerHTML = getTime(carOutTime)
    // 时长
    document.querySelector('.duration').innerHTML = stopCarTime
    // 缴费金额
    document.querySelector('.payment').innerHTML = cash


    // 启用超时定时器
    setTimeout(function () {
        stop.style.display = 'block';
        pick.style.display = 'none';
        no.style.display = 'none';
    }, 2000)

})








